<template>
  <div>
    <div v-for="(shop, index) in shops" :key="index" class="shopList" @click="clickAction(index)">
      <img :src="'https://elm.cangdu.org/img/'+(shop.image_path)" alt="" class="shopImg">
      <div class="shopRight">
        <div class="shopHeader">
          <span class="shophead"><span class="pingpai">品牌</span><span
              class="shopName">{{shop.name}}</span></span><span>保 准 票</span>
        </div>
        <div class="shopMiddle">
          <span>
            <span style="color: coral;margin-left: 5px;">
              <van-rate color="rgb(255,154,13)" v-model="shop.rating" readonly style="margin-right: 5px;"/>{{shop.rating}}
            </span>
            月售:{{shop.recent_order_num}}单
          </span>
          <span>
            <span
              style="color: rgb(255, 255, 255);background-color: #3190e8;border: .025rem solid #3190e8; margin-right: 5px;">蜂鸟专送</span><span
              style="color: #3190e8;border: .025rem solid #3190e8;">准时达</span>
          </span>
        </div>
        <div class="shopFooter" style="font-size: 10px;">
          <span>
            ￥20起送/{{shop.piecewise_agent_fee.tips}}
          </span>
          <span>
            <span style="color: silver;">{{shop.distance}}</span>/<span
              style="color: #3190e8;">{{shop.order_lead_time}}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  export default {
    name: 'shoplist',
    data() {
      return {
        path: "/search",
      }
    },
    props: {
      shops: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    methods: {
      clickAction(index) {
        // console.log(this.shops[index]);
        Cookie.set("shop_id", index);
        Cookie.set("shopId", this.shops[index].id);
        this.$router.push({ name: 'goShopping' });
      }
    }
  }
</script>
<style lang="less" scoped>
  .shopList {
    width: 100%;
    /* height: 100px; */
    /* background-color: red; */
    overflow: hidden;
    box-sizing: border-box;
    padding: 5px 5px 0px;
    margin-bottom: 0.6rem;
  }

  .shopImg {
    box-sizing: border-box;
    width: 19%;
    float: left;
    height: 1.7rem;
    padding: 0.2rem 0 0 0.2rem;
  }

  .shopRight {
    box-sizing: border-box;
    width: 80%;
    height: 100%;
    /* background-color: lightblue; */
    float: right;
    padding: 0 10px;
  }

  .shopHeader,
  .shopMiddle,
  .shopFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .shophead {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
    text-align: left;
  }

  .pingpai {
    background-color: rgb(255, 217, 48);
    font-weight: 600;
    font-size: 15px;
  }

  .shopName {
    font-size: 0.4rem;
    font-weight: 600;
    margin-left: 10px;
  }

  .shopHeader {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .shopMiddle {
    margin-bottom: 0.1rem;
  }

  .shopFooter {
    letter-spacing: 0.03rem;
    margin-bottom: 0.23rem;
  }
</style>